
<template>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="ischeckAll"/>
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- completed: 完成的类名 -->
      <!-- 通过v-for渲染数据 通过数组值来判断是否添加completed类名 -->
      <li v-for="(item, index) in list" :key="index" :class="{ completed: item.isDone }">
        <div class="view">
          <!-- input是否勾选与数组对象中的双向绑定     绑定change事件来实现任务状态修改功能 -->
          <input class="toggle" type="checkbox" :checked="item.isDone" @change="change(item.id)"/>
          <!-- 数据穿插，来显示数组对象中的任务 -->
          <label>{{ item.name }}</label>
          <!-- 点击删除按钮执行删除功能，传一个当前的对象的id -->
          <button class="destroy" @click="del(item.id)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>


<script>
export default {
  // 数据校验
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  // 拿到主组件传过来的数据
  props: ["list"],
  computed:{
    ischeckAll:{
      get(){
        return this.list.every(item=>item.isDone===true)
      },
      set(value){
        // console.log(value);      
        this.$emit('checkall', value);
      }
    }
  },
  methods: {
    // 给主组件传入要删除的对象的id
    del(id) {
      this.$emit("del", id);
    },
    // 给主组件传入要修改任务状态的对象的id
    change(id) {
      this.$emit("change", id);
    },
  },
};
</script>

<style>
</style>